<template>
  <div>
    <el-row class="fc-unit-wrap" :gutter="20">
      <el-col :span="24">
        <div class="title-card">
          <span class="title-name">{{groupName}}</span>
          <span class="title-points-num" v-if="deductNum > 0" >{{'-'+deductNum}}</span>
          <span class="title-points-desc">{{desc}}</span>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="content-card">
          <div class="points-card-item" v-for="(item, index) in dataList" :key="index">
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <img class="sys-icon" :src="item.icon">
              </el-col>
              <el-col :span="18">
                <p class="sys-name">
                  <span>{{item.name}}</span>
                  <span class="points-num" v-if="item.deduct > 0">{{'-' + item.deduct}}</span>
                  <span v-else class="color-card-point iconfont icon-duigou color-3"></span>
                </p>
                <p class="points-desc">{{item.title}}</p>
                <el-link v-if="item.deduct > 0" :type="item.deduct > 0 ? 'primary' : 'info'" :disabled="item.deduct > 0 ? false : true" @click="openDetail(index)">查看扣分明细</el-link>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      title="扣分明细"
      width="800px"
      top='25vh'
      :visible.sync="dialogDetail"
      @close="dialogDetail = false">
        <el-table
            :data="tableData"
            height="400"
            style="width: 100%">
            <el-table-column
              label="扣分明细">
              <template slot-scope="scope">
                <p>{{ (scope.row.location ? (scope.row.location+',') : '')  + scope.row.desc }}</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="发生时间"
              width="200">
            </el-table-column>
            <el-table-column
              prop="deduct"
              label="扣分"
              width="80">
            </el-table-column>
        </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getSafetyGroup } from '@/api/home'

export default {
  name: 'FacUnit',
  props: {
    orgId: {
        required: true
    },
    safetyRecordId: {
        required: true
    },
    groupId: {
        required: true
    },
  },
  data () {
    return {
      groupName: '',
      desc: '',
      deductNum: '',
      dataList: [],
      dialogDetail: false,
      tableData: [],
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      let that = this
      let parames = {
        orgId: that.orgId,
        groupId: that.groupId,
        safetyRecordsId: that.safetyRecordId
      }
      getSafetyGroup(parames).then(res => {
        if(res.status === 200) {
          that.groupName = res.data.groupName || '消防设施单元'
          that.deductNum = res.data.deduct
          that.desc = res.data.title
          that.dataList = res.data.details
        }
      })
    },
    openDetail(index) {
      let that = this
      that.tableData = that.dataList[index].deductDetails
      that.dialogDetail = true
    },
    // 更新/刷新模块
    refreshModel() {
      this.getDetailData()
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.fc-unit-wrap {
  .content-card{
    display: flex;
    border: none;
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
</style>
